import { useForm } from 'react-hook-form';
import { useDispatch } from 'react-redux';
import { useNavigate } from 'react-router-dom';
import Button from 'src/component/Button';
import Form from 'src/component/Form';
import FormInput from 'src/component/FormInput';
import Modal from 'src/component/Modal';
import { Ui } from 'src/constant/Env';
import { Page } from 'src/constant/Page';
// import { TwoStepVerificationForm } from 'src/model/Form';
import { openSnackbar } from 'src/redux/uiSlice';
import { UserGoogleYz } from 'src/service/userService';
import { setIsLogin } from 'src/redux/authSlice';
import style from './TfaModal.module.scss';

type TwoStepVerificationForm = {
  code: string
}

type Props = {
  open: boolean;
  onClose: () => void;
  loginData: { email: string; password: string };
  redirectPath?: string;
};

const TfaModal = ({ open, onClose, loginData, redirectPath }: Props) => {
  const dispatch = useDispatch();
  const navigate = useNavigate();
  const methods = useForm<TwoStepVerificationForm>();

  const onSubmit = (data: TwoStepVerificationForm) => {
    onClose();
    methods.reset();
    UserGoogleYz({
      uName: loginData.email,
      uGoogle: data.code,
    }).then(res => {
      if (res.success) {
        navigate(Page.Trade);
      } else {
        dispatch(openSnackbar({ message: res.message, severity: 'alert' }));
      }
    })
  };

  return (
    <Modal open={open} handleClose={onClose}>
      <div>
        <div className={style.heading}>二步骤验证</div>
        <Form methods={methods} onSubmit={onSubmit} className={style.form}>
          <FormInput label="二步骤验证码" name="code" autoFocus />
          <div className={style.buttons}>
            <Button appearance="secondary" onClick={onClose} type="button">
              取消
            </Button>
            <Button type="submit">送出</Button>
          </div>
        </Form>
      </div>
    </Modal>
  );
};

export default TfaModal;
